<template>
  <div class="bute">
    <GongYong class="header"></GongYong>
    <main>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="出售中商品（6）" name="first">
          <div class="input_ret">
            <div>
              <span>商品分类：</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="input">
              <!-- 搜索 -->
              <p>商品搜索：</p>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
              <el-button
                type="info"
                plain
                icon="el-icon-search"
                @click="kwywor"
              ></el-button>
            </div>
          </div>
          <!-- 添加 -->
          <el-button type="primary" @click="outerVisible = true"
            >添加商品</el-button
          >
          <el-dialog
            title="外层 Dialog"
            :visible.sync="outerVisible"
            width="90%"
          >
            <el-form :model="form">
              <el-steps :active="active" finish-status="success">
                <el-step title="商品信息"></el-step>
                <el-step title="商品详情"></el-step>
                <el-step title="其他设置"></el-step>
                <el-step title="规格设置"></el-step>
              </el-steps>
              <el-form class="el_fote">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品售价" :label-width="formLabelWidth">
                  <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <el-form class="el_fote">
                <el-form-item label="销量" :label-width="formLabelWidth">
                  <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存" :label-width="formLabelWidth">
                  <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <el-form class="el_fote">
                <el-form-item label="状态" :label-width="formLabelWidth">
                  <el-input v-model="form.word" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="操作时间" :label-width="formLabelWidth">
                  <el-input v-model="form.tel" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <el-form-item label="图片" :label-width="formLabelWidth">
                <el-input v-model="form.img" autocomplete="off"></el-input>
              </el-form-item>
              <p>
                商品封页图：<i
                  class="el-icon-camera"
                  @click="innerVisible = true"
                ></i>
              </p>
            </el-form>

            <el-dialog
              width="80%"
              title="上传图片"
              :visible.sync="innerVisible"
              append-to-body
            >
              <el-form :model="form">
                <header>
                  <el-input
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="input2"
                  >
                  </el-input>
                  <el-button type="primary">使用选中图片</el-button>
                  <div class="form_tag">
                    <p>
                      <i class="el-icon-upload2"></i>
                      <i class="el-icon-circle-plus-outline"></i>
                      <i class="el-icon-delete"></i>
                    </p>
                    <el-select v-model="value" placeholder="图片移动至">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </header>
                <div class="main_conter">
                  <el-col :span="12">
                    <el-menu
                      default-active="2"
                      class="el-menu-vertical-demo"
                     
                    >
                      <h5>全部分类</h5>
                      <el-submenu index="1">
                        <template slot="title">
                          <i class="el-icon-location"></i>
                          <span>小树树2</span>
                        </template>
                        <el-menu-item-group>
                          <el-menu-item index="1-1">选项1</el-menu-item>
                          <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                      </el-submenu>
                     <el-submenu index="2">
                        <template slot="title">
                          <i class="el-icon-location"></i>
                          <span>测试分类02</span>
                        </template>
                        <el-menu-item-group>
                          <el-menu-item index="1-1">选项1</el-menu-item>
                          <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                      </el-submenu>
                      <ul>
                        <li>测试分类3</li>
                        <li>ADIDAS春季新品</li>
                        <li>2323</li>
                        <li>图标素材</li>
                        <li>banner</li>
                        <li>分类素材</li>
                        <li>产品</li>
                        <li>导航菜单</li>
                      </ul>
                     
                     
                    </el-menu>
                  </el-col>
                  <div class="right">
                      <dl v-for="(item,ind) in tableData.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )" :key="ind">
                        <dd>
                          <img :src="item.img" alt="">
                        </dd>
                      </dl>
                       <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
                  </div>
                </div>
              </el-form>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
              <!-- <el-button @click="outerVisible = false">取 消</el-button> -->
              <el-button type="primary" @click="innerVisible = true"
                >打开内层 Dialog</el-button
              >
            </div>
          </el-dialog>

          <!-- 表格 -->
          <el-table
            :data="
              tableData.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
            "
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column label="商品圈" show-overflow-tooltip>
              <template slot-scope="scope">
                <img style="height: 50px" :src="scope.row.img" alt="" />
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              label="商品名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="price"
              label="商品售价"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="price" label="销量" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="price" label="库存" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="word" label="状态" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="tel" label="操作时间" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >查看</el-button
                >
                <el-button
                  @click.native.prevent="edit(scope.row, tableData)"
                  type="text"
                  size="small"
                >
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
          <!-- 分页 -->
        </el-tab-pane>
        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="dialogForm">
          <el-form :model="form">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品售价" :label-width="formLabelWidth">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="销量" :label-width="formLabelWidth">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存" :label-width="formLabelWidth">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存" :label-width="formLabelWidth">
              <el-input v-model="form.word" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="editLi()">确 定</el-button>
          </div>
        </el-dialog>
        <el-tab-pane label="仓库中商品（49）" name="second">
          <div class="input_ret">
            <div>
              <span>商品分类：</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="input">
              <!-- 搜索 -->
              <p>商品搜索：</p>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
              <el-button type="info" plain icon="el-icon-search"></el-button>
            </div>
          </div>
          <!-- 添加 -->
          <el-button type="primary">添加商品</el-button>
          <!-- 表格 -->
          <el-table
            :data="
              tableData.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
            "
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column label="商品圈" width="100">
              <template slot-scope="scope">
                <img style="height: 50px" :src="scope.row.img" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" width="180">
            </el-table-column>
            <el-table-column
              prop="price"
              label="商品售价"
              width="80"
            ></el-table-column>
            <el-table-column prop="price" label="销量" width="80">
            </el-table-column>
            <el-table-column prop="price" label="库存" width="80">
            </el-table-column>
            <el-table-column prop="title" label="状态" width="100">
            </el-table-column>
            <el-table-column prop="tel" label="操作时间" width="180">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >加入回收站</el-button
                >
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="已经售罄商品（24）" name="third">
          <div class="input_ret">
            <div>
              <span>商品分类：</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="input">
              <!-- 搜索 -->
              <p>商品搜索：</p>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
              <el-button type="info" plain icon="el-icon-search"></el-button>
            </div>
          </div>
          <!-- 添加 -->
          <el-button type="primary">添加商品</el-button>
          <!-- 表格 -->
          <el-table
            :data="
              tableData.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
            "
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column label="商品圈" width="100">
              <template slot-scope="scope">
                <img style="height: 50px" :src="scope.row.img" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" width="180">
            </el-table-column>
            <el-table-column
              prop="price"
              label="商品售价"
              width="80"
            ></el-table-column>
            <el-table-column prop="price" label="销量" width="80">
            </el-table-column>
            <el-table-column prop="price" label="库存" width="80">
            </el-table-column>
            <el-table-column prop="title" label="状态" width="100">
            </el-table-column>
            <el-table-column prop="tel" label="操作时间" width="180">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >加入回收站</el-button
                >
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="商品回收站" name="fourth">
          <div class="input_ret">
            <div>
              <span>商品分类：</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="input">
              <!-- 搜索 -->
              <p>商品搜索：</p>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
              <el-button type="info" plain icon="el-icon-search"></el-button>
            </div>
          </div>
          <!-- 添加 -->
          <el-button type="primary">添加商品</el-button>
          <!-- 表格 -->
          <el-table
            :data="
              tableData.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
            "
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column label="商品圈" width="100">
              <template slot-scope="scope">
                <img style="height: 50px" :src="scope.row.img" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" width="180">
            </el-table-column>
            <el-table-column
              prop="price"
              label="商品售价"
              width="80"
            ></el-table-column>
            <el-table-column prop="price" label="销量" width="80">
            </el-table-column>
            <el-table-column prop="price" label="库存" width="80">
            </el-table-column>
            <el-table-column prop="title" label="状态" width="100">
            </el-table-column>
            <el-table-column prop="tel" label="操作时间" width="180">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="text" size="small">编辑</el-button>
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >恢复商品</el-button
                >

                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import GongYong from "./gongyong";
export default {
  name: "Bute",
  components: {
    GongYong,
  },
  data() {
    return {
      activeName: "first",
      options: [],
      value: "",
      input: "",
      tableData: [],
      total: 2, //总页
      currentPage: 1, //初始页
      pagesize: 7, //每页数据
      active: 0,

      
      input2: "",
      dialogForm: false,
      form: {
        name: "",
        price: "",
        title: "",
        word: "",
      },
      formLabelWidth: "120px",
      dialogFormVisible: false,
      form: {
        name: "",
        price: "",
        title: "",
        word: "",
        tel: "",
        img: "https://img2.baidu.com/it/u=1894100898,4149033657&fm=11&fmt=auto&gp=0.jpg",
      },
      formLabelWidth: "100px",
      outerVisible: false,
      innerVisible: false,
    };
  },
  created() {
    axios.get("http://127.0.0.1:7001/getList").then((res) => {
      this.tableData = res.data.data;
      console.log("res...", res.data.data);
    });
  },
  methods: {
    handleClick(tab, event) {
      // this.$router.push(`/chaxun${}`)
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    //编辑
    edit(row) {
      this.dialogForm = true;
      Object.assign(this.form, { ...row });
    },
    editLi() {
      axios
        .put("http://127.0.0.1:7001/editList", { ...this.form })
        .then((res) => {
          this.dialogForm = false;
          this.$router.go(0);
        });
    },
    //搜索
    kwywor() {
      axios
        .get(`http://127.0.0.1:7001/getList/?keyword=${this.input}`)
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    addlect() {
      this.dialogFormVisible = true;
    },
    add() {
      axios
        .post("http://127.0.0.1:7001/addList", { ...this.form })
        .then((res) => {
          this.dialogFormVisible = false;
          this.$router.go("0");
        });
    },
  },
};
</script>

<style scoped lang="scss">
.bute {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #efefef;
}

main {
  flex: 1;
  background: #fff;
  padding: 0 10px;
}
.input_ret {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.input {
  width: 50%;
  display: flex;
  align-items: center;
  p {
    width: 100px;
  }
}
.el-button {
  margin: 5px 0;
}
.el-pagination {
  width: 70%;
  text-align: right;
  padding: 20px;
}
span {
  padding: 0 20px;
}
.el-dialog__body {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.el-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid #ccc;
  .form_tag {
    width: 90%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    i {
      border: 1px solid #ccc;
      padding: 10px 15px;
      font-size: 16px;
      font-weight: bolder;
    }
  }
  .el-input--prefix {
    width: 400px;
    margin: 0 20px;
  }
}
.main_conter {
  width: 100%;
  height: 300px;
   overflow: scroll;
   display: flex;
  .el-col{
    width: 200px;
   
  } 
  h5{
    text-align: center;
  }
  li{
    text-align: center;
    padding: 10px 0;
  }
  .right{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    dl dd img{
      width: 110px;
      height: 110px;
      padding: 10px;
      
    }
  }
}
</style>